<template>
	<el-menu-item v-if="!menu?.children" :index="menu?.path"
		><span :class="['iconfont', menu?.iconCls]"></span>&nbsp;{{ menu?.meta.title }}</el-menu-item
	>
	<el-sub-menu v-else :index="menu.path">
		<template #title>
			<el-icon><span :class="['iconfont', menu.iconCls]"></span></el-icon> &nbsp;<span>{{ menu.meta.title }}</span>
		</template>
		<NavMenu v-for="item in menu.children" :key="item.path" :menu="item"></NavMenu>
	</el-sub-menu>
</template>

<script setup lang="ts">
defineProps({
	menu: {
		type: Object,
		require: true
	}
})
import {
	Location,
	Grid,
	Setting,
	Service,
	User,
	Aim,
	Goods,
	Present,
	Calendar,
	OfficeBuilding,
	School
} from '@element-plus/icons-vue'

const menuIconCom = (icon: string) => {
	switch (icon) {
		case 'el-icon-user':
			return Location
		case 'el-icon-setting':
			return Setting
		case 'el-icon-service':
			return Service
		case 'el-icon-user-solid':
			return User
		case 'el-icon-office-building':
			return Aim
		case 'el-icon-goods':
			return Goods
		case 'el-icon-camera':
			return Present
		case 'el-icon-help':
			return Calendar
		case 'el-icon-student':
			return OfficeBuilding
		case 'el-icon-project':
			return School
		default:
			return Grid
	}
}
</script>

<style scoped></style>
